<template>
    <!-- <video-player  
        id="videoPlayer"
        class="video-player vjs-custom-skin" 
        ref="videoPlayer"
        :playsinline="true"
        :options="videoOptions"
        @play="onPlayerPlay($event)"
        @timeupdate="onPlayerTimeupdate($event)">
    </video-player> -->
    <div id="newDom">
         <!-- 使用 vjs-fluid，视频自适应，高度会变化，按产品要求，去掉自适应 2019/12/20 -->
        <video
            id="videoPlayer"
            ref="videoPlayer"
            class="video-js vjs-big-play-centered"
            width="100%"
            height="100%"
            oncontextmenu="return false;"
            disablePictureInPicture
            controlslist="nodownload">
        </video>
    </div>
</template>

<script >
    // import 'videojs-flash';
    import './../../assets/zh-CN';
    
	export default {
		props:['playParam'],
	    data() {
		    return {
                player: null, // 播放器
                timer: null,
				// videoOptions: {
                //     loop: false, // true -- 视频一结束就重新开始
                //     controls: true,
                //     autoplay: false, // true--浏览器准备好时开始回放
                //     height: '360',
                //     poster: "", // 封面地址
                //     language: 'zh-CN',
                //     techOrder: ['flash'],
                //     flash: {swf: SWF_URL },
                //     sources: [{
                //         type: "rtmp/mp4", // 类型
                //         src: "blabla" // 视频播放路径
                //     }],
                //     controlBar: {
                //         timeDivider: true,
                //         durationDisplay: true,
                //         remainingTimeDisplay: false,
                //         fullscreenToggle: true  //全屏按钮
                //     }
                // },
                videoOptions: {
                    loop: false, // true -- 视频一结束就重新开始
                    controls: true,
                    fluid: false, // 并且删除 video 结构的类 vjs-fluid  防止视频不同大小自适应，造成撑开父级元素
                    autoplay: false, // true--浏览器准备好时开始回放
                    height: '360',
                    poster: "", // 封面地址
                    language: 'zh-CN',
                    // techOrder: ['flash'],
                    // flash: {swf: SWF_URL },
                    sources: [{
                        // type: "video/mp4", // 类型
                        // type:"application/x-mpegURL",
                        type: this.playParam.type,
                        src: this.playParam.play_url // 视频播放路径
                    }],
                    controlBar: {
                        // currentTimeDisplay: true,
                        // timeDivider: true, // 时间分割线
                        // durationDisplay: true,
                        // remainingTimeDisplay: false,
                        fullscreenToggle: true,  //全屏按钮

                        children: [
                            {name: 'playToggle'}, // 播放按钮
                            {name: 'currentTimeDisplay'}, // 当前已播放时间
                            {name: 'progressControl'}, // 播放进度条
                            {name: 'durationDisplay'}, // 总时间
                            {
                                name: 'volumePanel', // 音量控制
                                inline: false, // 不使用水平方式
                            },
                            // {name: 'FullscreenToggle'} // 全屏
                        ]
                    },
                },
                changWidth: {}, // 播放器进度条宽度
                videoDom: null,
                reloadTime: undefined,
			}
		},
		mounted(){
            this.initPlay();
        },
        beforeDestroy() {
            this.player && this.player.dispose();
        },
		methods:{
            /**
             * 播放器初始化
             */
			initPlay(){

                let self = this;
                let videoPlayer = document.getElementById('newDom');
                videoPlayer.innerHTML = '<video id="videoPlayer" class="video-js vjs-big-play-centered vjs-fluid" width="100%" height="100%" oncontextmenu="return false;" disablePictureInPicture controlslist="nodownload"> </video>'
                this.player = this.$videojs('videoPlayer', this.videoOptions, function onPlayerReady() {})
                
                // 初始音量50%
                this.player.volume(0.5)

                // this.$refs.videoPlayer.player.src({ type: "rtmp/mp4", src: this.playParam.play_url }) ;
                this.videoDom = document.querySelector('#newDom .vjs-progress-control.vjs-control');
                
                // this.player.on('seeking', function() {
                //     // 暂停获取时间，播放时重新赋值
                //     self.reloadTime = self.player.currentTime();

                //     if (self.player.paused()) {
                //         self.player.play();
                //     }
                // })
                this.player.on('play', function() {
                    self.onPlayerPlay();
                })
                this.player.on('timeupdate', function() {
                    self.onPlayerTimeupdate();
                })
			},
			onPlayerPlay(){
                // if (this.reloadTime !== undefined && Math.abs(this.player.currentTime().toFixed(2) - this.reloadTime.toFixed(2)) > 0.3) {
                //     this.player.currentTime(this.reloadTime);
                // }

                // this.reloadTime = undefined;
                this.debounce(() => {
                    var normal_currentTime = this.player.currentTime();
                    var unnormal_currentTime = this.player.currentTime();
                    if (normal_currentTime.toString() == unnormal_currentTime.toString()) {
                        this.player.pause();
                        this.player.play();
                    }
                }, 100);
            },
			onPlayerTimeupdate(){       
				if( !is_empty( this.playParam.end_time ) && !is_empty( this.playParam.end_time ) ){
					//小于开始时间，从开始时间播放
					if( this.player.currentTime() < this.playParam.start_time  ){
						setTimeout( () => {
							this.player.currentTime( this.playParam.start_time ) ;
						},100)
					} else if( this.player.currentTime() > this.playParam.end_time ){ //大于结束时间，播放停止
						setTimeout( () => {
							this.player.currentTime( this.playParam.start_time ) ;
							this.player.pause();
						},100)
                    }
                }
                
                // 拖动进度条到结束，偶尔不会出现暂停按钮
                // if (this.player.currentTime() > this.player.duration()) {
                //     this.player.pause();
                // }
            },
            /**
             * 延迟处理
             */
            debounce(func, wait, immediate) {
                let timeout, args, context, timestamp, result;
                const later = function() {
                    // 据上一次触发时间间隔
                    const last = +new Date() - timestamp;

                    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
                    if (last < wait && last > 0) {
                        timeout = setTimeout(later, wait - last);
                    } else {
                        timeout = null;
                        // 如果设定为immediate===true，因为开始已经调用过了此处无需调用
                        if (!immediate) {
                            result = func.apply(context, args);
                            if (!timeout) context = args = null;
                        }
                    }
                };
                return function(...args) {
                    context = this;
                    timestamp = +new Date();
                    const callNow = immediate && !timeout;
                    // 如果延时不存在，重新设定延时
                    if (!timeout) timeout = setTimeout(later, wait);
                    if (callNow) {
                        result = func.apply(context, args);
                        context = args = null;
                    }

                    return result;
                };
            },
		}
	}
</script>

<style lang="scss">
    #newDom{
        height: 100%;
    }
    @import url('./../../assets/video.css');
</style>